<template>
  <div class="designer-container">
    <div class="designer-toolbar">
      <header-bar />
    </div>
    <main class="designer-canvas">
      <!-- 这里是画布内容 -->
      <div style="background-color: #fff">
        <canvas-edit />
        <!-- <div class="target" ref="targetRef">
            <img style="width: 100px; height: 100px;" src="../../assets/images/loading.png" alt="">
        </div>
        <Moveable
        :throttleDrag="throttleDrag"
        :draggable="draggable"
          :target="targetRef"
          :warpable="warpable"
          :renderDirections="renderDirections"
          @warp="onWarp"
        /> -->
      </div>
      <quick-opr />
    </main>
    <footer class="designer-controls">
      <footer-bar />
    </footer>
  </div>
</template>
<script setup lang="ts">
// import Moveable from "vue3-moveable";
// import { ref } from "vue";
import HeaderBar from "@/views/Editor/layouts/header/headerBar.vue";
import FooterBar from "@/views/Editor/layouts/footer/footerBar.vue";
import CanvasEdit from "@/views/Editor/layouts/canvasEdit/canvasEdit.vue";
import { getActiveCore } from "@/views/Editor/core";
import { appInstance } from "@/views/Editor/app";
import { EditorMain } from "@/views/Editor/app/editor";
import { TO_USER_CMD } from "@/constant/IframeCmd";
import messageHandlerInstance from "@/handler/IframeMessageHandler";
import QuickOpr from "@/views/Editor/layouts/quickOpr/quickOpr.vue";

// const draggable = true;
// const throttleDrag = 1;
// const warpable = true;
// const renderDirections = ["nw", "n", "ne", "w", "e", "sw", "s", "se"];
// const targetRef = ref(null);
// const onWarp = (e) => {
//   e.target.style.transform = e.transform;
// };

const position = ref("1");
const loading = ref(true);

onBeforeMount(() => {
  loading.value = false;
  const { service } = getActiveCore();
  appInstance.editor = service.createInstance(EditorMain);
  appInstance.editor.startup();
  messageHandlerInstance.postMsg(TO_USER_CMD.inited);
});

onBeforeUnmount(() => {
  appInstance.editor.dispose();
  appInstance.editor = null!;
});
</script>


<style lang="less">
@import url("./styles/layouts");
.target{
    width: 100px;
    height: 200px;
}
//
//
//.control-group {
//    flex: 1; /* 每个控制组平分底部空间 */
//    display: flex;
//    justify-content: space-around; /* 子元素之间平均分布 */
//}
</style>
